<template>
  <nav>
    <ul>
      <!-- 每个路径都对应一个组件，Vue Router 会根据当前路径匹配并加载相应的组件。路径是router下index.ts配置的路径-->
      <li>
        <router-link to="/login">登录</router-link>
      </li>
      <li>
        <router-link to="/user-list">用户管理</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Menu',
};
</script>

<style>
nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 15px;
}

nav a {
  text-decoration: none;
  color: #007bff;
}

nav a:hover {
  text-decoration: underline;
}
</style>
